@page "/blog/how-to-enhance-the-new-datagrid-menu-filter"

<Seo Canonical="/blog/how-to-enhance-the-new-datagrid-menu-filter" Title="How to enhance the new DataGrid menu filter" Description="Discover expert tips and techniques to supercharge the functionality of the new DataGrid menu filter. Learn how to optimize your data filtering capabilities for improved data management and analysis with our step-by-step guide." ImageUrl="/img/blog/2023-09-08/how_to_enhance_the_new_dataGrid_menu_filter.png" />

<BlogPageImage Source="/img/blog/2023-09-08/how_to_enhance_the_new_dataGrid_menu_filter.png" Text="How to enhance the new DataGrid menu filter" />

<BlogPageTitle>
    How to enhance the new DataGrid menu filter
</BlogPageTitle>

<BlogPageParagraph>
    With the release of <Anchor To="news/release-notes/130" Title="Link to Blazorise v1.3">Blazorise v1.3</Anchor>, we introduced a new <Strong>Filter Method</Strong> option that we've named Menu mode. With this new option you're now able to use pre-defined filtering on a per-column basis.
</BlogPageParagraph>

<BlogPageParagraph>
    While this is a great addition to the Blazorise <Code>DataGrid</Code> and it improves the flexibility of the filtering provided, it's still not a perfect solution. And that's what we'll touch on, on this blog post.
</BlogPageParagraph>

<BlogPageSubtitle>
    Contextual filtering by column type
</BlogPageSubtitle>

<BlogPageParagraph>
    Contextual filtering that makes sense as per your column types is currently not supported out of the box.
</BlogPageParagraph>

<BlogPageParagraph>
    <Strong>I.e</Strong> A numeric column type should have ways to filter by <Strong>"less than"</Strong> or <Strong>"greater than"</Strong> for instance.
</BlogPageParagraph>

<BlogPageParagraph>
    Let's talk about how we can make this work by using the <Code>DataGrid</Code> tools that we have at our disposal.
</BlogPageParagraph>

<BlogPageImageModal ImageSource="img/blog/2023-09-08/custom-filter-menu-example.png" ImageTitle="Custom Filter Menu Example" />

<Heading Size="HeadingSize.Is3">
    Custom Filter Method
</Heading>

<BlogPageParagraph>
    Let's start with the first limitation, the <Code>DataGridFilterMethod</Code>. At the time of writing this only supports:
</BlogPageParagraph>

<BlogPageList>
    <BlogPageListItem>
        <Code>Contains</Code>
    </BlogPageListItem>
    <BlogPageListItem>
        <Code>StartsWith</Code>
    </BlogPageListItem>
    <BlogPageListItem>
        <Code>EndsWith</Code>
    </BlogPageListItem>
    <BlogPageListItem>
        <Code>Equals</Code>
    </BlogPageListItem>
    <BlogPageListItem>
        <Code>NotEquals</Code>
    </BlogPageListItem>
</BlogPageList>

<BlogPageParagraph>
    So we definitely need a way to further enhance the filtering capabilities. Let's introduce a new <Code>MyFilter</Code> enum which additionally introduces <Strong>"LessThan"</Strong> and <Strong>"GreaterThan"</Strong>. And you can, of course, further extend this to fit your needs.
</BlogPageParagraph>

<BlogPageSourceBlock Code="HowToEnhanceDataGridMenuFilter_MyFilterExample" />

<Heading Size="HeadingSize.Is3">
    Custom Filter Tracker
</Heading>

<BlogPageParagraph>
    Next up, we need to find a way to track & glue our custom filter system together. Let's go ahead and create a custom <Code>FilterTracker</Code> class that will hold our custom filter values.
</BlogPageParagraph>

<BlogPageParagraph>
    We'll also go ahead and create a new <Code>ColumnFilter</Code> class that will hold the filtering state we need to keep for each column.
</BlogPageParagraph>

<BlogPageSourceBlock Code="HowToEnhanceDataGridMenuFilter_FilterTrackerExample" />

<Heading Size="HeadingSize.Is3">
    Custom Filter Menu Template
</Heading>

<BlogPageParagraph>
    Now we need to update the UI so it uses our custom implementation, let's use the provided <Code>FilterMenuTemplate</Code> in order to do so.
</BlogPageParagraph>

<BlogPageSourceBlock Code="HowToEnhanceDataGridMenuFilter_FilterMenuTemplateExample" />

<Heading Size="HeadingSize.Is3">
    Making it work
</Heading>

<BlogPageParagraph>
    Now that the user can submit the new filter values, and we are tracking everything under our <Code>FilterTracker</Code> we can leverage the Datagrid's <Code>CustomFilter</Code> in order to apply our custom filtering.
</BlogPageParagraph>

<BlogPageParagraph>
    <Strong>Note:</Strong> Don't forget to set the Datagrid's parameters! <Code>Filterable FilterMode="DataGridFilterMode.Menu" CustomFilter="MyCustomFilter"</Code>
</BlogPageParagraph>

<BlogPageSourceBlock Code="HowToEnhanceDataGridMenuFilter_CustomFilterExample" />

<Heading Size="HeadingSize.Is3">
    Read Data
</Heading>

<BlogPageParagraph>
    Optionally by using the Datagrid's <Code>ReadData</Code> feature this example still holds true, as you hold the filtering state & logic in your own hands.
</BlogPageParagraph>

<BlogPageParagraph>
    You will not be using the <Code>CustomFilter</Code> anymore, but you will be using the <Code>ReadData</Code> together with the filtering state that you've tracked to apply your custom filtering logic. Of course you will have to do your own translation in order to make it work with your backend.
</BlogPageParagraph>

<BlogPageSubtitle>
    Conclusion
</BlogPageSubtitle>

<BlogPageParagraph>
    In an ideal world, component libraries do most of the heavy lifting for us, but it's not unusual for a library to sometimes have certain gaps in functionality. This shows that with a little creativity we can still use our favorite libraries and enhance them in order to accomplish our use cases.
</BlogPageParagraph>

<BlogPageParagraph>
    We'll definitely keep improving the <Code>Datagrid</Code>filtering in future versions and we're hoping to bring you better column contextual filtering out of the box, but in the meantime, we leave you with this alternative to improve the filtering capabilities of your <Code>DataGrid</Code>.
</BlogPageParagraph>

<BlogPageParagraph>
    You can find the working full code example by visiting the <Anchor To="https://github.com/Megabit/Blazorise/issues/4941#issuecomment-1711836031" Title="Link to following github issue">following github issue</Anchor>.
</BlogPageParagraph>

<BlogPagePostInto UserName="David Moreira" ImageName="david" PostedOn="September 8th, 2023" Read="5 min" />
